<!DOCTYPE html>
<html><!--HTML5 doctype-->
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="Pragma" content="no-cache">
<script src="intelxdk.js"></script>
<!-- phantom library, needed for XDK api calls -->
<script src="cordova.js"></script>
<!-- phantom library, needed for Cordova api calls -->
<script src="xhr.js"></script>
<!-- phantom library, needed for XDK CORS -->
<script type="text/javascript" language="javascript">
    var onDeviceReady = function () {                 // called when Cordova is ready
      if (window.Cordova && navigator.splashscreen) { // Cordova API detected
        navigator.splashscreen.hide();                // hide splash screen
      }
      setTimeout(function () {
        $.ui.launch();
      }, 50);
    };
    document.addEventListener("deviceready", onDeviceReady, false);
    
    //var BASE_URL = "http://192.168.10.14/wnsgbl-repo/mobileapp/";
    var BASE_URL = "https://www.winsglobal.com/mobileapp/";
</script>
<script src="js/jquery.min.js"></script>
<script src="js/af.ui.jquery.min.js"></script>
<script src="js/af.scroller.js"></script>
<script>
    var currentPage = 1;
    
    function getCatalogues()	{
        $.ajax({
            type:"GET",
            url:BASE_URL+"catalogue/1/null",
            //data:{'foo':'bar'},
            success:function(data){
                var list_html = "";
                for(var i=0; i< data.length; i++){
                    var id = data[i].mrcID;
                    var name = data[i].mrc_brandName;
                    var companyName = data[i].mrc_companyName;
                    var img = data[i].mrc_logo;
                    var flipcatalogue = data[i].flipcatalogue_url;
            
                    //list_html += '<li><a href="#'+id+'">'+ name +'</a></li>';
            
                    /* Dynamically add panel */
                    //var panel_content = '<h2>'+name+'</h2><div class="photo"><a href="'+flipcatalogue+'" target="_top" ><img src="'+img+'" style="width: 100%; height: auto;"/></a></div>';
                    //$.ui.addContentDiv(id, panel_content, "Partner Info"); 
                    list_html += '<li><h2>'+name+'</h2><div class="photo"><img src="'+img+'" style="width: 100%; height: auto;"/></div><a href="'+flipcatalogue+'" target="_top" class="button">Open Flip Book</a></li><hr><br>'
                }
                $("#catalogueList").html(list_html);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
                alert(thrownError);
            }
        });
    }
    
    // enable pullToRefresh and infiniteScroll to listview (af.scroller.js)
    function setupListUpdate(){
        $.ui.ready(function () {
            var scrollerList = $("#catalogues").scroller();

            scrollerList.addPullToRefresh();
            $.bind(scrollerList, "refresh-release", function () {
                var self = this;
                //setTimeout(function () { // get content from your api using ajax and display instead of setTimeout.
                    // add new content at top of list
                    //$("#catalogueList ul").prepend("<li><a href='#detailview'>New Item (via Pull Refresh)</a></li>");                                    
                    //self.hideRefresh();
                //}, 2000);
                //getCatalogues(false);
                currentPage = 1;
                $.ajax({
                    type:"GET",
                    url:BASE_URL+"catalogue/1/null",
                    //data:{'foo':'bar'},
                    success:function(data){
                        var list_html = "";
                        for(var i=0; i< data.length; i++){
                            var id = data[i].mrcID;
                            var name = data[i].mrc_brandName;
                            var companyName = data[i].mrc_companyName;
                            var img = data[i].mrc_logo;
                            var flipcatalogue = data[i].flipcatalogue_url;

                            //list_html += '<li><a href="#'+id+'">'+ name +'</a></li>';

                            /* Dynamically add panel */
                            //var panel_content = '<h2>'+name+'</h2><div class="photo"><a href="'+flipcatalogue+'" target="_top" ><img src="'+img+'" style="width: 100%; height: auto;"/></a></div>';
                            //$.ui.addContentDiv(id, panel_content, "Partner Info"); 
                            list_html += '<li><h2>'+name+'</h2><div class="photo"><img src="'+img+'" style="width: 100%; height: auto;"/></div><a href="'+flipcatalogue+'" target="_top" class="button">Open Flip Catalogue</a></li><hr><br>'
                        }
                        $("#catalogueList").html(list_html);
                        self.hideRefresh();
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        self.hideRefresh();
                        alert(xhr.status);
                        alert(thrownError);
                    }
                });
                
                return false; //tells it to not auto-cancel the refresh
            });

            scrollerList.addInfinite();
            $.bind(scrollerList, "infinite-scroll", function () {
                var self = this;
                
                $("#catalogues").find("#infinite").html('<img src="images/ajax-loader.gif" style="width:24px;height:24px" alt="Title" data-appbuilder-object="image" class="">');
                /*setTimeout(function () { // get content from your api using ajax and display instead of setTimeout.
                    $("#catalogueList").find("#infinite").text("Load More");
                    // add new content at bottom of list
                    $("#catalogueList ul").append("<li><a href='#detailview'>Next Item (via Infinite Scroll)</a></li>");
                    self.clearInfinite();
                }, 2000);*/
                //getCatalogues(true);
                var goToPage = currentPage+1;
                $.ajax({
                    type:"GET",
                    url:BASE_URL+"catalogue/"+goToPage+"/null",
                    //data:{'foo':'bar'},
                    success:function(data){
                        var list_html = "";
                        if(data && data.length > 0) {
                            for(var i=0; i< data.length; i++){
                                var id = data[i].mrcID;
                                var name = data[i].mrc_brandName;
                                var companyName = data[i].mrc_companyName;
                                var img = data[i].mrc_logo;
                                var flipcatalogue = data[i].flipcatalogue_url;

                                //list_html += '<li><a href="#'+id+'">'+ name +'</a></li>';

                                /* Dynamically add panel */
                                //var panel_content = '<h2>'+name+'</h2><div class="photo"><a href="'+flipcatalogue+'" target="_top" ><img src="'+img+'" style="width: 100%; height: auto;"/></a></div>';
                                //$.ui.addContentDiv(id, panel_content, "Partner Info"); 
                                list_html += '<li><h2>'+name+'</h2><div class="photo"><img src="'+img+'" style="width: 100%; height: auto;"/></div><a href="'+flipcatalogue+'" target="_top" class="button">Open Flip Catalogue</a></li><hr><br>'
                            }
                            $("#catalogueList").append(list_html);
                            currentPage = currentPage + 1;
                        }
                        //alert('test '+currentPage);
                        self.clearInfinite();
                        $("#catalogues").find("#infinite").html("");
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        self.clearInfinite();
                        alert(xhr.status);
                        alert(thrownError);
                    }
                });
                
            });

            scrollerList.enable();
        });
    }
</script>
<script>
    //if (isIntel)
      //$.ui.autoLaunch = false;
    $.ui.animateHeaders = false;
    $.ui.useOSThemes = false; //Change this to false to force a device theme
    $.ui.blockPageScroll();
    $(document).ready(function () {
        if ($.ui.useOSThemes && (!$.os.ios || $.os.ios7))
            $("#afui").removeClass("ios");
        
        //$.ui.setSideMenuWidth('260px');
        setupListUpdate();
        $.ui.launch();
        //$.ui.removeFooterMenu();
        getCatalogues();
    });
    $( document ).on( "tap", ".link", function() {
        url = $(this).attr("rel");   
        loadURL(url);
    });
    
    function loadURL(url){
        navigator.app.loadUrl(url, { openExternal:true });
        return false;
    }
</script>
<link href="css/af.ui.css" rel="stylesheet" type="text/css">
<link href="css/icons.css" rel="stylesheet" type="text/css">
<style>
    #infinite {height:60px;line-height:60px;font-weight:bold;text-align:center}
    
    /*.loading {
        background-image: url('images/ajax-loader.gif');
        width: 40px;
        height: 40px;
    }*/
</style>
</head>
<body>
<div id="afui" class="ios7">
    <!--Left Side Menu Navigation bar -->
    <!--<nav id="nav_0">
        <ul class="list">
            <li><a href="#home" class="icon home">Home</a>
            </li>
            <li><a href="#catalogues" class="icon user">Catalogues</a>
            </li>
        </ul>
    </nav>-->
    <div id="splashscreen" class="ui-loader">
        <br>
        <br>
        <span class="ui-icon ui-icon-loading spin"></span>
        <h1>Starting app</h1>
    </div>
    <div id="header" class="header"></div>
    <div id="content" style="">
        <div class="panel" title="Home" id="home" selected="selected" style="" data-appbuilder-object="page"
        data-footer="footer_2" data-nav="nav_0">
            <header data-appbuilder-object="header" class="" style="">
                <!--<a id="menubadge" onclick="$.ui.toggleSideMenu()" class="menuButton" style="float:left !important"></a>-->
                <h1>Home</h1>
            </header>
            <div class="container" style="width: 100%; height: 100%;" data-appbuilder-object="container">

                <div class="text_item" data-appbuilder-object="text" style="text-align: center;">
                    <h2>WINS Global Catalogues</h2>
                </div>
                <img src="images/homeblock-catalogue.jpg" style="width: 100%; height: auto;" alt="Title"
                data-appbuilder-object="image" class="" title="">
                <div class="text_item" data-appbuilder-object="text" style="text-align: center;">
                    <p>Flip Book Product Catalogue for WINS Global</p>
                    <p>Please visit our website at winsglobal.com</p>
                    <a href="#" rel="https://www.winsglobal.com" class="button link" data-appbuilder-object="button">Visit</a>
                </div>
            </div>
        </div>
        <div class="panel" title="Catalogues" data-nav="nav_0" data-footer="footer_2" id="catalogues"
        style="" data-appbuilder-object="page">
            <header data-appbuilder-object="header" class="" style="">
                <!--<a id="menubadge" onclick="$.ui.toggleSideMenu()" class="menuButton" style="float:left !important"></a>-->
                <h1>Catalogues</h1>
            </header>
            <ul id="catalogueList" data-appbuilder-object="list">
            </ul>
            <div id="infinite"></div>
        </div>
    </div>
    <div id="navbar" class="footer">
        <footer id="defaultFooter"><a class="icon home">Home</a>
        </footer>
    </div>
    <footer id="footer_2" data-appbuilder-object="footer"><a href="#home" class="icon home">Home</a><a href="#catalogues" class="icon stack">Catalogues</a>
    </footer>
</div>
</body>





</html>